<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单控件绑定</title>
</head>

<body>
    <div id="app">
        <h1>基础用法</h1>
        <h2>1.文本</h2>
        <input type="text" name="" v-model="message">
        <p>{{message}}</p>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h2>2.多行文本</h2>
        <textarea v-model="message"></textarea>
        <p>{{message}}</p>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h2>3.复选框</h2>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <p>多个勾选框，绑定到同一个数组：</p>
        <input type="checkbox" id="HTML5" v-model="checkedNames" value="HTML5">
        <label for="HTML5">HTML5</label>
        <input type="checkbox" id="CSS3" v-model="checkedNames" value="CSS3">
        <label for="CSS3">CSS3</label>
        <input type="checkbox" id="vue" v-model="checkedNames" value="vue">
        <label for="vue">vue</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h2>4.单选按钮</h2>
        <input type="radio" value="HTML5" v-model="picked" id="radioHTML5">
        <label for="radioHTML5">HTML5</label>
        <input type="radio" value="CSS3" v-model="picked" id="radioCSS3">
        <label for="radioCSS3">CSS3</label>
        <br>
        <span>Checked: {{ picked }}</span>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <H2>5.选择列表</H2>
        <p>单选列表</p>
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
        <p>多选列表（绑定到一个数组）：</p>
        <select v-model="selecteds" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selecteds }}</span>
        <p>动态选项，用 v-for 渲染：</p>
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>绑定 value</h1>
        <h2>1.复选框</h2>
        <input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
    </div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World',
            checked: true,
            checkedNames: [],
            picked: '',
            selected: 'A',
            selecteds: [],
            options: [{
                text: 'One',
                value: 'A'
            }, {
                text: 'Two',
                value: 'B'
            }, {
                text: 'Three',
                value: 'C'
            }],
            a:'value-a',
            b:'value-b'
        }
    })
    </script>
</body>

</html>
